import React, { useState, useContext, useEffect } from "react";
import { Routes, Route, NavLink } from 'react-router-dom'
import { Recommend, Backend, Frontend, Android, Ios } from '../views'
import { getCategories, getArticles } from '../fake-api'
import { AuthContext, initState } from "../contexts/authContext"
import { Articles } from "../components/Articles/Articles"
import "./nav.css"


export const NavRouter = () => {
  const RouterAddress = ['/recommend', "/backend", "/frontend", "/android", "/ios"]


  const { state, dispatch } = useContext(AuthContext);

  const getData = async () => {
    const categories = await getCategories();
    const data = categories.data.categories;
    await dispatch({ categories: data }) 
  }
  // getData()
  useEffect(async () => {
    getData()
    
    await dispatch({ category_id: state.category_id })
  }, [])
  // console.log(state, "yijiluyou");
  return (
    <>
      <div className="view-nav" >
        <ul>
          {
            state.categories ? state.categories.map((item) => {
              return (
                <li key={item.category_id} onClick={() => dispatch({ type: item.category_name, category_id: item.category_id })} >
                  <NavLink style={{ textDecoration: 'none' }} to={RouterAddress[item.category_id]} >{item?.category_name}</NavLink>
                </li>
              )
            }) : ""
          }
        </ul>
      </div>
      <div className="articles-nav-box">
        <div className="article-nav-separate"></div>
        <Routes>
          <Route exact path="/recommend" element={<Recommend />}>
            <Route exact path="" element={<Articles />}></Route>
          </Route>
          <Route exact path="/backend" element={<Backend />} >
            <Route exact path=":id" element={<Articles />}>
              
            </Route>
          </Route>
          <Route exact path="/frontend" element={<Frontend />}>
            <Route exact path=":id" element={<Articles />} />
          </Route>
          <Route exact path="/android" element={<Android />} >
            <Route exact path=":id" element={<Articles />} />
          </Route>
          <Route exact path="/ios" element={<Ios />} >
            <Route exact path=":id" element={<Articles />} />
          </Route>
          <Route exact path="/" element={<Recommend />}>
            <Route exact path="" element={<Articles />} />
          </Route>
        </Routes>
      </div>


    </>
  )
}